import * as React from "react";
import * as  ReactDOM from 'react-dom';
import Chart, { ChartType, ColorTypes } from "./charts/index";


class ChartPanel extends React.Component {
  _id: string = "TChart";
  _chart;
  _labels = [];
  _series = [];

  state = {
    chartType: ChartType.Line,
  };

  componentDidMount() {
//    this._labels = [1553584860000, 1553584920000, 1553584980000, 1553585040000, 1553585100000, 1553585160000, 1553585220000, 1553585280000, 1553585340000, 1553585400000, 1553585460000, 1553585520000, 1553585580000, 1553585640000, 1553585700000, 1553585760000, 1553585820000, 1553585880000, 1553585940000, 1553586000000, 1553586060000, 1553586120000, 1553586180000, 1553586240000, 1553586300000, 1553586360000, 1553586420000, 1553586480000, 1553586540000, 1553586600000, 1553586660000, 1553586720000, 1553586780000, 1553586840000, 1553586900000, 1553586960000, 1553587020000, 1553587080000, 1553587140000, 1553587200000, 1553587260000, 1553587320000, 1553587380000, 1553587440000, 1553587500000, 1553587560000, 1553587620000, 1553587680000, 1553587740000, 1553587800000, 1553587860000, 1553587920000, 1553587980000, 1553588040000, 1553588100000, 1553588160000, 1553588220000, 1553588280000, 1553588340000, 1553588400000, 1553588460000];
//    this._series = [
//      {
//        legend: "cpu mean(usage_iowait)",
//        data: {"1553584860000":0,"1553584920000":0.013891669446701017,"1553584980000":0.008329172911234705,"1553585040000":0.0027777777773331357,"1553585100000":0.008333333333009958,"1553585160000":0.01389583959015415,"1553585220000":0.00833889445007632,"1553585280000":0.0027791673622525825,"1553585340000":0.013884728466676833,"1553585400000":0.008336113892294975,"1553585460000":0.002779167360723608,"1553585520000":0.008340284034736807,"1553585580000":0.0013891669447219455,"1553585640000":0.002780558335865811,"1553585700000":0.0013891680558081963,"1553585760000":0.008345856294536087,"1553585820000":0.008331956254557496,"1553585880000":0.0027791673609825675,"1553585940000":0.0013884728467403666,"1553586000000":0.008333333333009958,"1553586060000":0.008336113891283414,"1553586120000":0.0011116672227901568,"1553586180000":0.001388611944202923,"1553586240000":0.0027763895825728777,"1553586300000":0.008334722917411485,"1553586360000":0.008330563885597997,"1553586420000":0.008334722917412003,"1553586480000":0.008329172910223651,"1553586540000":0.008340284033207314,"1553586600000":0.008333333334537908,"1553586660000":0.005561116672224746,"1553586720000":0.00832639513181396,"1553586780000":0.008329172911986836,"1553586840000":0.0027791673609825675,"1553586900000":0.001388611944202923,"1553586960000":0.008330563885597997,"1553587020000":0.002779167361993623,"1553587080000":0.013891680558600399,"1553587140000":0.008337506255056066,"1553587200000":0.0027791673617346634,"1553587260000":0.008333333331999407,"1553587320000":0.001389583959015415,"1553587380000":0.008330563885857215,"1553587440000":0.0028622130634268893,"1553587500000":0.01389027847233621,"1553587560000":0.008340284033466273,"1553587620000":0.0027777777783436854,"1553587680000":0.01388333888300188,"1553587740000":0.002779167361993623,"1553587800000":0.08347247965626894,"1553587860000":0.008334722917670444,"1553587920000":0.01389862293067897,"1553587980000":0.008336113891284426,"1553588040000":0.002779167360723608,"1553588100000":0.01389168055834118,"1553588160000":0.008336113892294975,"1553588220000":0.002780558335606592,"1553588280000":0.013888899999291123,"1553588340000":0.008334722916917829,"1553588400000":0.008334722917411485,"1553588460000":0}
//      },
//      {
//        legend: "cpu mean(usage_user)",
//        data: {"1553584860000":0.27532972398446043,"1553584920000":0.2418627204475548,"1553584980000":0.2251488146911972,"1553585040000":0.19177516139678616,"1553585100000":0.26961969224588345,"1553585160000":0.2223585529948009,"1553585220000":0.211244735263601,"1553585280000":0.2585642549336533,"1553585340000":0.21402522244130204,"1553585400000":0.21126268004370863,"1553585460000":0.2557100508155977,"1553585520000":0.21128912546460119,"1553585580000":0.23067936624542085,"1553585640000":0.2752434197441216,"1553585700000":0.2613559502227971,"1553585760000":0.19738496513949066,"1553585820000":0.2502601498784724,"1553585880000":0.21962664690276387,"1553585940000":0.21680720391674818,"1553586000000":0.2557683689975353,"1553586060000":0.2585586590341745,"1553586120000":0.20285012081774145,"1553586180000":0.2641100487005594,"1553586240000":0.2196099535566057,"1553586300000":0.2307377332597954,"1553586360000":0.258497487442636,"1553586420000":0.21681273834455655,"1553586480000":0.19453908107447182,"1553586540000":0.29745166494515435,"1553586600000":0.20846129885925338,"1553586660000":0.23352105651403543,"1553586720000":0.2623060318090645,"1553586780000":0.2168322008600406,"1553586840000":0.205714108744912,"1553586900000":0.2612960788930585,"1553586960000":0.19739329378457462,"1553587020000":0.2251849469923951,"1553587080000":0.2418613378082951,"1553587140000":0.2112696502188585,"1553587200000":0.2307349287623454,"1553587260000":0.24456959323822275,"1553587320000":0.21405718040375266,"1553587380000":0.2112155427309331,"1553587440000":0.2734902790716582,"1553587500000":0.20290152599643593,"1553587560000":0.19735157310853635,"1553587620000":0.3002433458165119,"1553587680000":0.20851831213132524,"1553587740000":0.23350021947732888,"1553587800000":0.22796838157574525,"1553587860000":0.2140626648775669,"1553587920000":0.2530113990449514,"1553587980000":0.2975115578076692,"1553588040000":0.20286127641906504,"1553588100000":0.22513766324105847,"1553588160000":0.2641183542110794,"1553588220000":0.22518916840809222,"1553588280000":0.20843351549035585,"1553588340000":0.2752071952844894,"1553588400000":0.2362877192292879,"1553588460000":0.34200907707010186}
//      },
//      {
//        legend: "cpu mean(usage_system)",
//        disable: true,
//        data: {"1553584860000":0.23369230534004326,"1553584920000":null,"1553584980000":null,"1553585040000":null,"1553585100000":null,"1553585160000":0.09173761197559072,"1553585220000":0.08336811465758538,"1553585280000":0.09173065988132881,"1553585340000":0.08616676404047158,"1553585400000":0.08339868551190943,"1553585460000":0.1139515008146044,"1553585520000":0.06671811602089028,"1553585580000":0.08336394030617715,"1553585640000":0.10840423687783746,"1553585700000":0.13348360324754863,"1553585760000":0.08617090631848785,"1553585820000":0.11675708841303517,"1553585880000":0.09727926191962494,"1553585940000":0.06947364933384764,"1553586000000":0.10841539254632283,"1553586060000":0.08060839730908063,"1553586120000":0.10003894310579249,"1553586180000":0.10286122793056725,"1553586240000":0.0917431772807346,"1553586300000":0.0750431077114401,"1553586360000":0.10006955429821429,"1553586420000":0.09727368132886983,"1553586480000":0.09171118201194672,"1553586540000":0.10007647298691097,"1553586600000":0.08335838755195533,"1553586660000":0.12786536189352216,"1553586720000":0.09772189753415567,"1553586780000":0.07783062646918171,"1553586840000":0.10005979663338654,"1553586900000":0.10839869662307601,"1553586960000":0.07505563481898855,"1553587020000":0.07227228202815908,"1553587080000":0.09173203832069146,"1553587140000":0.09172923549084697,"1553587200000":0.075043107712983,"1553587260000":0.11115420489816291,"1553587320000":0.06392503336489735,"1553587380000":0.08614730006603726,"1553587440000":0.12569899220693553,"1553587500000":0.08893754518143625,"1553587560000":0.09172090075864303,"1553587620000":0.16681684607886885,"1553587680000":0.06950565569730854,"1553587740000":0.08894172367858583,"1553587800000":0.11675293217253839,"1553587860000":0.07783616532982471,"1553587920000":0.09729452091771743,"1553587980000":0.11121405446627199,"1553588040000":0.08892782364335992,"1553588100000":0.09172229591665985,"1553588160000":0.08618621404331656,"1553588220000":0.0833959174917529,"1553588280000":0.08335839033363704,"1553588340000":0.08894867855956054,"1553588400000":0.1362098383524788,"1553588460000":0.10007513781781763}
//      },
//    ];
    this._labels = [1563790680000];
    while (this._labels[this._labels.length - 1] < 1563875320000) {
      this._labels.push(this._labels[this._labels.length - 1] + 1800000);
    }
    const data = [[1563790680000,"discount",15.0],[1563790680000,"recommend",15.0],[1563792480000,"discount",2.0],[1563792480000,"recommend",2.0],[1563792660000,"discount",13.0],[1563792660000,"recommend",13.0],[1563797340000,"recommend",3.0],[1563797340000,"discount",2.0],[1563797520000,"discount",12.0],[1563797520000,"recommend",12.0],[1563798060000,"discount",16.0],[1563798060000,"recommend",16.0],[1563816060000,"discount",1.0],[1563816060000,"recommend",1.0],[1563845040000,"discount",1.0],[1563845040000,"recommend",1.0],[1563848460000,"recommend",3.0],[1563849540000,"discount",6.0],[1563849540000,"recommend",6.0],[1563850080000,"discount",6.0],[1563850080000,"recommend",6.0],[1563850260000,"discount",2.0],[1563850260000,"recommend",2.0],[1563850620000,"discount",2.0],[1563850620000,"recommend",2.0],[1563850800000,"recommend",5.0],[1563850800000,"discount",3.0],[1563857460000,"discount",1.0],[1563857460000,"recommend",1.0],[1563864480000,"recommend",6.0],[1563864480000,"discount",5.0],[1563864840000,"discount",1.0],[1563864840000,"recommend",1.0],[1563868440000,"discount",7.0],[1563868440000,"recommend",7.0],[1563868800000,"discount",52.0],[1563868800000,"recommend",52.0],[1563868980000,"discount",59.0],[1563868980000,"recommend",59.0],[1563869160000,"discount",59.0],[1563869160000,"recommend",59.0],[1563869340000,"discount",58.0],[1563869340000,"recommend",58.0],[1563869520000,"discount",59.0],[1563869520000,"recommend",59.0],[1563869700000,"discount",59.0],[1563869700000,"recommend",59.0],[1563869880000,"discount",58.0],[1563869880000,"recommend",58.0],[1563870060000,"recommend",59.0],[1563870060000,"discount",58.0],[1563870240000,"discount",59.0],[1563870240000,"recommend",59.0],[1563870420000,"discount",59.0],[1563870420000,"recommend",59.0],[1563870600000,"discount",58.0],[1563870600000,"recommend",58.0],[1563870780000,"discount",59.0],[1563870780000,"recommend",59.0],[1563870960000,"recommend",59.0],[1563870960000,"discount",58.0],[1563871140000,"discount",59.0],[1563871140000,"recommend",59.0],[1563871320000,"discount",59.0],[1563871320000,"recommend",59.0],[1563871500000,"discount",59.0],[1563871500000,"recommend",59.0],[1563871680000,"discount",59.0],[1563871680000,"recommend",59.0],[1563871860000,"discount",58.0],[1563871860000,"recommend",58.0],[1563872040000,"recommend",59.0],[1563872040000,"discount",58.0],[1563872220000,"discount",59.0],[1563872220000,"recommend",59.0],[1563872400000,"discount",59.0],[1563872400000,"recommend",59.0],[1563872580000,"discount",59.0],[1563872580000,"recommend",59.0],[1563872760000,"discount",59.0],[1563872760000,"recommend",59.0],[1563872940000,"discount",59.0],[1563872940000,"recommend",59.0],[1563873120000,"discount",59.0],[1563873120000,"recommend",59.0],[1563873300000,"discount",58.0],[1563873300000,"recommend",58.0],[1563873480000,"discount",59.0],[1563873480000,"recommend",59.0],[1563873660000,"discount",59.0],[1563873660000,"recommend",59.0],[1563873840000,"discount",59.0],[1563873840000,"recommend",59.0],[1563874020000,"discount",59.0],[1563874020000,"recommend",59.0],[1563874200000,"discount",59.0],[1563874200000,"recommend",59.0],[1563874380000,"discount",59.0],[1563874380000,"recommend",59.0],[1563874560000,"discount",59.0],[1563874560000,"recommend",59.0],[1563874740000,"discount",59.0],[1563874740000,"recommend",59.0],[1563874920000,"discount",58.0],[1563874920000,"recommend",58.0],[1563875100000,"discount",59.0],[1563875100000,"recommend",59.0],[1563875280000,"discount",14.0],[1563875280000,"recommend",14.0]];
    const series = {"discount": {}, "recommend": {}};
    data.forEach(item => {
      series[item[1]][item[0]] = item[2];
    });
    this._series = [
      {
        legend: "discount",
        data: series["discount"]
      },
      {
        "legend":"recommend",
        "disable":false,
        data: series["recommend"]
      }
    ];
    this._chart = new Chart(this._id, {title: "TChart", width: 800, height: 500, isSeriesTime: true, colorTheme: ColorTypes.Multi, labels: this._labels, series: this._series}, this.state.chartType);
  }

  onSelectType(e) {
    const chartType = e.target.value;
    this.updateChartType(chartType);
  }

  updateChartType(chartType) {
    this.setState({chartType}, () => {
      setTimeout(() => {
        if ("no-data" === chartType) {
          this._chart.setOptions({
            loading: false, labels: [], series: [], reload: () => {
              this.updateChartType(ChartType.Line);
            }
          });
        } else if (ChartType.Line === chartType) {
          this._chart.setOptions({loading: false, overlay: false, labels: this._labels, series: this._series});
        } else {
          this._chart.setOptions({loading: false, overlay: true, labels: this._labels, series: this._series});
        }
      }, 3000);
      this._chart.setType(chartType, {loading: true, isSeriesTime: true, showLegend: ChartType.Area === chartType, labels: [], series: []});
    });
  }

  render() {

    return (
      <div>
        <div>
          图表类型：&nbsp;&nbsp;
          <select onChange={this.onSelectType.bind(this)} value={this.state.chartType}>
            {
              Object.keys(ChartType).map(key => {
                return <option key={key} value={ChartType[key]}>{key}</option>
              })
            }
            <option key={"no-data"} value={"no-data"}>无数据</option>
          </select>
        </div>
        <div id={ this._id }></div>
      </div>

    )
  }

}

ReactDOM.render(<ChartPanel/>, document.getElementById("root"));